import styled from 'styled-components';

export const HomePage = styled.div`
    min-height: calc(100vh - 100px);
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    perspective: 900px;
    background-color: red;

    .circle{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        border-radius: 50%;
        transform-style: preserve-3d;
        perspective: 500px;
        transform: rotateX(60deg);
        animation: zhuan 2s linear infinite forwards;

        .dot{
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            transform: translate(100px, -50%) rotateX(90deg);
        }

        @keyframes zhuan {
            from{
                transform: rotateX(60deg) rotateZ(0deg);
            }
            to{
                transform: rotateX(60deg) rotateZ(360deg);
            }
        }
    }

    .box1{
        width: 400px;
        height: 400px;
        box-shadow: 0px 0px 10px 1px #71d3ef;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: rotateY(45deg) rotateX(-50deg);
        transform-style: preserve-3d;
        perspective: 900px;
        border-radius: 50%;
        animation: ani 5s linear infinite forwards;

        .box2{
            width: 300px;
            height: 300px;
            box-shadow: 0px 0px 10px 1px #71d3ef;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translateZ(50px);
            transform-style: preserve-3d;
            perspective: 900px;
            border-radius: 50%;

            .box3{
                width: 200px;
                height: 200px;
                box-shadow: 0px 0px 10px 1px #71d3ef;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: translateZ(50px);
                transform-style: preserve-3d;
                perspective: 900px;
                border-radius: 50%;

                .box4{
                    width: 100px;
                    height: 100px;
                    box-shadow: 0px 0px 10px 1px #71d3ef;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transform: translateZ(50px);
                    border-radius: 50%;
                }
            }
        }

        @keyframes ani {
            0%{
                transform: rotateY(0deg) rotateX(0deg);
            }
            50%{
                transform: rotateY(60deg) rotateX(-60deg);
            }
            100%{
                transform: rotateY(-60deg) rotateX(120deg);
            }
        }
    }
`